<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../css/c.css" /> -->
    <!--
        rel:
            icon 
            stylesheet
        href 加载外部样式文件
        src 加载外部脚本文件
    -->
    <style>
    
        * {
        margin: 0;
        padding: 0;
    }

    .logo img {
        vertical-align: bottom;
        margin-top: 7.5px;
        
        margin-bottom: 7.5px;
        float: left;
    }

    

    .header {
        line-height: 100px;
        height: 100px;
        background-color: aqua;
        margin: 0 20%;
        overflow: hidden;
    }
    .headerbox2{
        margin-left: 50px;
        float: left;
        overflow: hidden;

    }


    

    .headerbox1{
        float: left;
        margin-left: 100px;
        overflow: hidden;

    }
    .headerbox1 li {
        float: left;
       display: inline-block;
       margin-left: 20px;
    }
    .headerbox2 li {
        float: left;
        display: inline-block;
       margin-left: 20px;
    }

    li{
        list-style: none;
    }
    a{
        text-decoration: none;
        color:black;
    }


    .swipper{
        width: 400%;
        height: 200px;
        background-color: blueviolet;
        /* margin-left: -100%; */

    }

    .swipper .box {
        width: 25%;
        height: 200px;
        float: left;
        overflow: hidden;
    }
    .swipper div:nth-of-type(1) {
        background-image: url("../imgs/banner_01.jpg");
    }
    .swipper div:nth-of-type(2) {
        background-color:url("../imgs/banner_02.jpg");
    }
    .swipper div:nth-of-type(3) {
        background-color: url("../imgs/banner_03.jpg");
    }
    .swipper div:nth-of-type(4) {
        background-color: url("../imgs/banner_01.jpg");
    }

    .wrapper {
        overflow: hidden;
    }

    .introduce {
        height: 300px;
        margin: 0 20%;
        text-align: center;
    }
    .introduce .iheader{
        height: 100px;
        background-color: gray;
    }
    .introduce .intrabout{
        height: 200px;
        background-color: darkgray;

    }
    </style>
</head>

<body>
    <div class="header">
           <div class="logo">
                <img src="../imgs/logo.jpg">
           </div>
        
            <div>
                        
                <ul class="headerbox1">
                        <li> <a href="about:blank" target="_blank">企业首页</a></li>
                        <li> <a href="about:blank" target="_blank">关于我们</a></li>
                        <li><a href="about:blank" target="_blank">新闻中心</a></li>
                        <li><a href="about:blank" target="_blank">产品中心</a></li>
                        <li><a href="about:blank" target="_blank">客户服务</a></li>
                        <li><a href="about:blank" target="_blank">联系我们</a></li>
                </ul>
            </div>

            <div>
                <ul class="headerbox2">
                    <li>CN</li>
                    <li>EN</li>
            </ul>

            </div>
    </div>

    </div>
    <div class="wrapper">

            <div class="swipper">
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
            
            
            </div>
    </div>
    <div class="introduce">
        <div class="iheader">
            <div class="box">
                h1
            </div>
            <div class="box">
                text
            </div>
        </div>

        <div class="intrabout">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3 </div>
            <div class="box">4 </div>

        </div>
        
    </div>
    <div class="main"> main</div>
    <div class="footer">footer</div>
</body>

</html>